/* ============================= */
/* CSS for control sap.f/Avatar  */
/* Base theme                    */
/* ============================= */

.sapFAvatar {
	display: inline-block;
	position: relative;
}

.sapFAvatarImage {
	background: no-repeat center;
}

.sapFAvatarImageCover {
	background-size: cover;
}

.sapFAvatarImageContain {
	background-size: contain;
	background-color: @sapUiContentImagePlaceholderBackground;
}

.sapFAvatarIcon {
	text-align: center;
	background-color: @sapUiContentImagePlaceholderBackground;
	color: @sapUiContentIconColor;

	.sapUiIcon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}
}

.sapFAvatarInitialsHolder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.sapFAvatarCircle {
	border-radius: 100%;
	-webkit-border-radius: 100%;

	.sapMImg {
		border-radius: 100%;
		-webkit-border-radius: 100%;
	}
}

.sapFAvatarXS {
	height: 2rem;
	width: 2rem;
	font-size: 1rem;

	.sapFAvatarInitialsHolder {
		font-size: 0.75rem;
	}
}

.sapFAvatarS {
	height: 3rem;
	width: 3rem;
	font-size: 1.5rem;

	.sapFAvatarInitialsHolder {
		font-size: 1.125rem;
	}
}

.sapFAvatarM {
	height: 4rem;
	width: 4rem;
	font-size: 2rem;

	.sapFAvatarInitialsHolder {
		font-size: 1.625rem;
	}
}

.sapFAvatarL {
	height: 5rem;
	width: 5rem;
	font-size: 2.5rem;

	.sapFAvatarInitialsHolder {
		font-size: 2rem;
	}
}

.sapFAvatarXL {
	height: 7rem;
	width: 7rem;
	font-size: 3rem;

	.sapFAvatarInitialsHolder {
		font-size: 2.75rem;
	}
}

.sapFAvatarFocusable:focus {
	outline: 1px dotted @sapUiContentFocusColor;
	outline-offset: -1px;
}

.sapFAvatarInitials {
	background-color: @sapUiContentImagePlaceholderBackground;

	.sapFAvatarInitialsHolder {
		color: @sapUiContentIconColor;
	}
}